<template>
  <d2-container :class="{'page-compact':crud.pageOptions.compact}">
    <d2-crud-x
      ref="d2Crud"
      @dictConfig="openItemsDrawer"
      v-bind="_crudProps"
      v-on="_crudListeners">
      <div slot="header">
        <crud-search ref="search" :options="crud.searchOptions" @submit="handleSearch"/>

        <el-button slot="header" size="small" type="primary" @click="addRow"><i class="el-icon-plus"/> 新增</el-button>
        <crud-toolbar v-bind="_crudToolbarProps" v-on="_crudToolbarListeners"/>
      </div>
    </d2-crud-x>

    <el-drawer
      size="50%"
      title="字典配置"
      :visible.sync="drawerItemsVisible">
<!--      <div style="box-sizing: border-box;padding-left: 20px">-->
        <dict-item :dict-id="dictId" style="width: 100%"/>
<!--      </div>-->

    </el-drawer>
  </d2-container>
</template>

<script>
import {crudOptions} from './crud'
import {d2CrudPlus} from 'd2-crud-plus'
import * as api from './api'
import DictItem from './dict-item'

export default {
  name: 'User',
  mixins: [d2CrudPlus.crud],
  data() {
    return {
      dictId: null,
      roleList: [],
      checkedRoleIds: [],
      drawerItemsVisible: false,
      currentUserId: undefined
    }
  },
  components: {
    DictItem
  },
  methods: {
    openItemsDrawer(event) {
      this.dictId = event.row.id
      this.drawerItemsVisible = true
    },
    getCrudOptions() {
      return crudOptions(this)
    },
    pageRequest(query) {
      return api.GetPage(query)
    },
    addRequest(row) {
      return api.AddObj(row)
    },
    updateRequest(row) {
      return api.UpdateObj(row)
    },
    delRequest(row) {
      return api.DelObj(row.id)
    },
    infoRequest(row) {
      return api.GetObj(row.id)
    },
  }
}
</script>
